<template>
  <div class="detail">
    <my-back></my-back>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in detailObj.pics2" :key="index">
        <img :src="item" alt="">
      </van-swipe-item>
    </van-swipe>
    <div class="detail-it-top">
       <p>{{detailObj.basicInfo.name}}</p>
       <span>{{detailObj.basicInfo.characteristic}}</span>
       <section>
         <span style="color:red;">低价￥{{detailObj.basicInfo.minPrice}}</span>
         <!-- &#x3000; 中文空格 -->
         <span>&#x3000;原价￥{{detailObj.basicInfo.originalPrice}}</span>
         <span>库存{{detailObj.basicInfo.stores}}</span>
       </section>
    </div>
    <!-- <div class="count_cut">
       <span>商品介绍</span>
    </div> -->

    <div v-html="detailObj.content"></div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import { getDetail } from "../../api/second/second";
import myBack from "../../components/myBack.vue";
export default {
  components: { myBack },
  setup() {
    const route = useRoute();
    let id = route.params.id;
    const data = reactive({
      detailObj: {},
    });
    getDetail({ id: id }).then((res) => {
      // console.log(res);
      data.detailObj = res.data;
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.detail {
  height: 100%;
  background: #e9e9e9;
  .my-swipe{
    img{
      width: 100%;
      height: 750px;
    }
  }
  .detail-it-top{
    background: #fff;
    padding: 0 10px 10px 26px;
    overflow: hidden;
    margin-top: -20px;
    p{
      font-size: 30px;
      margin-top: 50px;
    }
    span{
      font-size: 24px;
      color: #B8B8B8;
      margin: 30px 0 34px;
    }
    section{
      display: flex;
      height: 70px;
      span:last-child{
        margin-left: auto;
      }
    }
  }
}
</style>